<style>
   /*品牌列表*/
   .brand-type{
    background: #fff;
  }
  .brand-type .type-attrs{
    border-bottom: 1px dashed #e5e5e5;
    overflow: hidden;	
  }
  .brand-type .type-attrs .attr_name{
    float: left;
    color: #888888;
    width: 8%;
    text-indent: 22px;
    background-color: #e8e8e8;
    height: 40px;
    line-height: 40px;
  }
  .brand-type .type-attrs .attr_Values {
   position: relative;
   float: left;
   background-color: #fff;
   width: 92%;
 }
 .brand-type .type-attrs  .attr_Values ul {
  position: relative;
  margin-right: 80px;
  margin-left: 10px;
  clear: both;
  overflow: hidden;

}
.brand-type .type-attrs  .attr_Values ul.attr_list{
  height: 40px;
  line-height: 40px;
  transition: 0.5s;
}
.brand-type .type-attrs  .attr_Values ul.attr_list.attr_more{
  height: auto;
}
.attr_Values ul li {
  float: left;
  padding-right: 40px;
}
.attr_Values ul li a {
  display: block;
  white-space: nowrap;
}
.brand-type .type-attrs a:hover{
  color:#333;
}
.brand-type .type-attrs .attr_more_select{
  position: absolute;
  right: 40px;
  top:0;
  height: 40px;
  line-height: 40px;
  color:#1c1c1c;
}
.brand-type .type-attrs .attr_more_select a:hover{
 color:#1c1c1c;
}
.brand-type .type-attrs.clear-boder{
  border-bottom: 0
}
.brand-type .type-attrs .attr_more_select i{
  display: block;
  position: absolute;
  right: -26px;
  width: 18px;
  height: 18px;
}
.brand-type .type-attrs .attr_more_select .ui_c_arrow{
  top: 22px;
  transition: 0.5s;
}
.brand-type .type-attrs .attr_more_select.on .ui_c_arrow{
  top:12px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transform: rotate(-180deg);
  right: -18px;
}
.breadcrumb{background-color: #e8e8e8;}


@media(min-width:1170px)
{
  .list-item{
    width: 20%;
  }

}
.list{
  background-color: #f4f4f4; 
}
.list-item{
  padding: 0px 5px;
  margin-bottom: 10px;
}
.item-contain{
  background-color: #fff;
  padding: 10px;
}
.item-contain p{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.brand_icon{
  float: left;
  margin-right: 8px;
  height:50px;
}

.brand-title p{
  margin: 0px;
  font-size: 1em;
}

.item img{
  width: 100%; 
}
.item-price{
  margin-top: 1em;
  margin-bottom: 0.5em;

}
.item-price .price{
  color: #ca0f1c;
  font-size: 1.3em;
  font-weight: bold;
}
.item-price .sale{
  float: right;
  background: #ca0f1c;
  padding: 0px 10px;
  color: white;
}

</style>

<ol class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li class="active">浏览记录</li>
</ol>

<div>
  <?php 
  foreach ($items as $key => $item) {
  ?>
    <div class="col-sm-3 col-xs-4 list-item" onclick="getItemDetail(<?php echo $item->id;?>)">
        <div class="item-contain">
            <div class="brand">
                <?php
                if($item->brandLogo){
                  echo '<img src="'.$item->brandLogo.'" class="brand_icon">';
                }else{
                  echo '<img src="http://img.bstapp.cn/website/best/image/blank.jpg@90Q" class="brand_icon">';
                }
                ?>
                <div class="brand-title">
                    <p><?php echo $item->brandName;?></p>
                    <p><?php echo $item->brandNameCH;?></p>
                </div>
            </div>
            <div class="item">
                <img src="<?php echo $item->image;?>" class="img-responsive" alt="Generic placeholder thumbnail">
            </div>
            <div class="item-price">
                <span class="price">¥<?php echo $item->salePrice;?></span>
                <?php 
                $discount = floor($item->salePrice / $item->marketPrice*10);
                if($discount<10){
                  echo '<span class="sale">'.$discount.'折</span>';
                }
                ?>
            </div>
            <p><?php echo $item->title;?></p>
        </div>
    </div>
  <?php
  }
  ?>
    <div class="clearfix"></div>
</div>
